<template>
    <div id="app" class="app">
        <add-input></add-input>
        <div id="title_list" class="title_list">
            <router-link class="router_link" to="/book">书籍</router-link>
            <router-link class="router_link" to="/movie">电影</router-link>
            <router-link class="router_link" to="/game">游戏</router-link>
            <router-link class="router_link" to="/variety">综艺</router-link>
            <router-link class="router_link" to="/sports">体育</router-link>
        </div>
        <keep-alive>
            <router-view/>
        </keep-alive>
<!--
    使用keep-alive这个内置组件,包裹在router-view之外,会缓存这些router-view组件, 组件被缓存之后就不会触发销毁操作了, 同时的,这个组件只有第一次被显示的时候会创建,之后就都不会走创建或挂载 还有销毁这些生命周期了
    0.1为了可以正常的在这些组件被显示或者隐藏的时候去调用某些操作,所以keep-alive为此提供了两个钩子函数
    0.2使用了keep-alive之后created destroyed这两个生命周期基本上就没什么用了,更多的时候是使用activated deactivated
    activated ==> 当组件被展示的时候触发
    deactivated ==> 当离开(以藏)组件的时候被触发

    在平常开发中,如果一些组件被多次和多处使用,并且没有必要频繁初始化的时候,那么我们就可以对这些组件进行持久化操作,使组件的状态保持不变,在下一次展示时,也不会重新的刷新组件状态.
   比如说,有一个很长很长的列表页面,列表页面中都是跳转详情的链接, 当页面滚出去一定高度的时候,用户点击了某个详情,当用户浏览完详情之后点击返回上一页,此时,用户是希望还是停留在跳转之前的,但是如果不实用keep-alive,组件就会重新刷新回到顶部, 所以我们一般在遇到类似操作时,使用keep-alive组件,这样就可以保持之前的状态
-->
    </div>
</template>
<script>
import AddInput from "./components/AddInput";

export default {
    name: "App",
    components: {
        AddInput
    }
}
</script>
<style>
.app {
    margin: 100px auto;
    width: 600px;
    background-color: #eeeeee;
}

.title_list {
    height: 50px;
}

.router_link {
    float: left;
    width: 80px;
    height: 50px;
    line-height: 50px;
    font-weight: 900;
    text-align: center;
    background-color: green;
    cursor: pointer;
    color: black;
}

.router-link-active {
    background-color: blue;
    color: #ffffff;
}
</style>
